<template>
  <div class="table">
    <div class="container">
      <div class="handle-box">
        <el-input v-model="search_word" size="mini" placeholder="搜索歌曲" class="handle-input"></el-input>
        <el-button type="primary" @click="dialogVisible = true">添加歌曲</el-button>
        <el-button type="danger" @click="deleteMoreButton">批量删除</el-button>
      </div>
      <el-dialog title="添加歌曲" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="歌手名" prop="singerName">
            <el-input v-model="ruleForm.singerName"></el-input>
          </el-form-item>
          <el-form-item label="歌名" prop="songName">
            <el-input v-model="ruleForm.songName"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addSong()">确 定</el-button>
        </span>
      </el-dialog>


      <el-table border :data="this.tableData" ref="multipleTable" border style="width: 100%" height="630px"
        @selection-change="deleteMore">
        <el-table-column width="30px" type="selection"></el-table-column>

        <el-table-column align="center" label="歌曲">
          <template slot-scope="scope">
            {{scope.row.name}}
          </template>
        </el-table-column>


        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" @click="deleteButton(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>

    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        songListId: this.$route.query.songListId,
        dialogVisible: false,
        result: '',
        ruleForm: {
          songName: '',
          singerName: ''
        },
        multipleSelect: [],
        tableData: [],
        tempData:[],
        search_word:'',
        rules: {
          songName: [{
            required: true,
            message: '请输入歌曲名',
            trigger: 'blur'
          }],
          singerName: [{
            required: true,
            message: '请输入歌手名',
            trigger: 'blur'
          }]
        },

      }
    },
    created() {
      this.getData();
    },
    watch: {
      search_word: function() {
        if (this.search_word == '') {
          this.tableData = this.tempData;
        } else {
          this.tableData = [];
          for (let item of this.tempData) {
            if (item.name.includes(this.search_word)) {
              this.tableData.push(item);
            }
          }
        }
      }
    },
    methods: {
      deleteMore(more) {
        this.multipleSelect = more;
      },
      deleteMoreButton() {
        if (confirm("删除之后不可恢复，你确定要批量删除！")) {
          let songIds = [];
          let songListIds = [];
          for (let item of this.multipleSelect) {
            songIds.push(item.id);
            songListIds.push(parseInt(this.songListId));
          }
          let data = {
            "songIds": songIds,
            "songListIds": songListIds
          };
          this.axios.post(this.$store.state.HOST + '/songAndSongList/delete', data, {}).then((res) => {
            if (res.data.code == 1) {
              this.$message.success("批量删除成功");
              this.getData();
            } else {
              this.$message.error("批量删除失败");
            }
          })
        }
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      deleteButton(songId) {
        let songIds = [];
        let songListIds = [];
        songIds.push(songId);
        songListIds.push(parseInt(this.songListId));
        let data = {
          "songIds": songIds,
          "songListIds": songListIds
        };
        if (confirm("删除之后不可恢复，你确定要删除它！")) {
          this.axios.post(this.$store.state.HOST + '/songAndSongList/delete', data, {}).then((res) => {
            if (res.data.code == 1) {
              this.$message.success("删除成功");
              this.getData();
            } else {
              this.$message.error("删除失败");
            }
          })
        }
      },
      addSong() {
        let _songName = this.ruleForm.singerName + '-' + this.ruleForm.songName;
        this.axios.get(this.$store.state.HOST + '/song/findOneByName', {
          params: {
            "name": _songName,
          }
        }).then((res) => {
          if (res.data.code == 1) {
            let _songId = res.data.data.id;

            let data = {
              "songId": _songId,
              "songListId": this.songListId
            }
            this.axios.post(this.$store.state.HOST + '/songAndSongList/add', data, {}).then((res) => {
              if (res.data.code == 1) {
                this.$message.success("添加成功");
                this.getData();
                this.dialogVisible=false;
              } else {
                this.$message.error("添加失败");
              }
            });

          } else {
            this.$message.error("找不到该歌曲！");
          }
        });
      },
      getSongBySongId(songId) {
        this.axios.get(this.$store.state.HOST + '/song/findById', {
          params: {
            "id": songId
          }
        }).then((res) => {
          if (res.data.code == 1) {
            this.tableData.push(res.data.data);
            this.tempData.push(res.data.data);
          }
        });
      },
      getData() {
        this.tableData=[];
        this.template=[];
        this.axios.get(this.$store.state.HOST + '/songAndSongList/findBySongListId', {
          params: {
            "songListId": this.songListId
          }
        }).then((res) => {
          if (res.data.code == 1) {
            for (let item of res.data.data) {
              this.getSongBySongId(item.songId);
            }
          }
        })
      },
    },
  }
</script>

<style>
  .handle-box {
    margin-bottom: 5px;
  }
  
  .song-img {
    width: 100%;
    height: 80px;
    border-radius: 5px;
    margin-bottom: 5px;
    overflow: hidden;
  }
  
  .handle-input {
    width: 300px;
    display: inline-block;
  }
</style>
